<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 18:19:02
-->
<template>
  <!--1. 容器 -->
  <div ref="right2_container" id="container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Gauge } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[],
      percent:0
    }
  },

  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    
    initChart(){
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ['#F4664A', '#FAAD14', '#30BF78'];
      const gauge = new Gauge(this.$refs.right2_container, {
    percent: this.percent,
  range: {
    ticks: [0, 1],
    color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    title: {
      formatter: ({ percent }) => {
        if (percent < ticks[1]) {
          return '差';
        }
        if (percent < ticks[2]) {
          return '中';
        }
        return '优';
      },
      style: ({ percent }) => {
        return {
          fontSize: '20px',
          lineHeight: 1,
          color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
        };
      },
    },
    content: {
      offsetY: 36,
      style: {
        fontSize: '24px',
        color: '#4B535E',
      },
      formatter: () => '系统表现',
    },
  },
      }) 

gauge.render()
setInterval(()=>{
  if(this.percent<0.5){
    this.percent+=0.01
    gauge.changeData(this.percent);
  }else{
    this.percent =0.5
  }

},50)
    }
  }
}
</script>